<template slot-scope="scope">
  <div>
    <el-checkbox :indeterminate="isIndeterminateRepair" v-model="checkAllRepair" @change="handleRepairCheckAllChange">维修类型</el-checkbox>
    <div style="margin:0px 0px 0px 20px;width:20px;">
      <el-checkbox-group v-model="checkedListMaintenanceType" @change="handleCheckedCitiesChangeRepair">
        <el-checkbox v-for="repairs in sitesRepairRepair" :label="repairs.REPAIR_TYPE_CODE" :key="repairs.REPAIR_TYPE_CODE" :value="repairs.REPAIR_TYPE_CODE">
          {{repairs.REPAIR_TYPE_NAME}}
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>


<script>
  import { mapState } from 'vuex';
  import { dictionary } from '@/utils/dictMixin';
  import { findAllRepairType} from '@/api/common/auth/roleManage'
  export default {
    name: "maintenanceType",
    props:['userPermissionData'],
    mixins: [dictionary],
    data() {
      return {
        checkAllRepair: false,
        checkedListMaintenanceType: [],
        loading: false,
        isIndeterminateRepair: false,
        sitesRepairRepair: [],
        roleId: '',
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      async loadData() {
        this.loading = true;
        const RepairTypeData= await findAllRepairType()
        console.log(RepairTypeData,"RepairTypeData")
        this.loading = false
        // console.log(RepairTypeData.data,"RepairTypeData.data")
        if(RepairTypeData.data.length>0) {
          this.sitesRepairRepair = _.cloneDeep(RepairTypeData.data);
        }

        console.log(this.userPermissionData,"维修类型")
        if(this.userPermissionData.checkedListMaintenanceType){
          let checkList = this.userPermissionData.checkedListMaintenanceType.split(",")
          checkList.forEach(x=>{
            this.checkedListMaintenanceType.push(x)
          })
          if(this.checkedListMaintenanceType.length == this.sitesRepairRepair.length){
            this.checkAllRepair=true
          }
        }
      },
      handleRepairCheckAllChange(val) {
        const checkedListMaintenanceType = [];
        if (val) {
          for (var i = 0; i < this.sitesRepairRepair.length; i++) {
            checkedListMaintenanceType.push(this.sitesRepairRepair[i].REPAIR_TYPE_CODE);
          }
        }
        this.checkedListMaintenanceType = checkedListMaintenanceType;
        this.isIndeterminateRepair = false;
      },
      handleCheckedCitiesChangeRepair(value) {
        let checkedCount = value.length;
        this.checkAllRepair = checkedCount === this.sitesRepairRepair.length;
        this.isIndeterminateRepair = checkedCount > 0 && checkedCount < this.sitesRepairRepair.length;
      },
      getData() {
        return [...this.checkedListMaintenanceType]
      }
    }
  }

</script>

<style scoped>
  .el-checkbox+.el-checkbox {
    margin-left: 0px;
  }
  .el-checkbox {
    margin-right: 25px;
  }

</style>
